<!--
 * @Description: 
 * @Version: 1.0
 * @Author: tao
 * @Date: 2021-01-21 13:28:32
 * @LastEditors: tao
 * @LastEditTime: 2021-04-12 22:14:58
-->
<template>
  <Model
    :title="row.edit ? '编辑' : '添加'"
    :width="400"
    :show="show"
    @confirm="confirm"
    @cancel="cancel"
  >
    <Form slot="form">
      <FormItem label="学号">
        <a-input v-model="row.id" placeholder="请输入内容"></a-input>
      </FormItem>
      <FormItem label="姓名">
        <a-input v-model="row.name" placeholder="请输入内容"></a-input>
      </FormItem>
      <FormItem label="电话">
        <a-input v-model="row.phone" placeholder="请输入内容"></a-input>
      </FormItem>
      <FormItem label="专业">
        <a-select
          show-search
          placeholder="请选择"
          option-filter-prop="children"
          style="width: 181.6px"
          :default-value="row.subjectName"
          @change="(e) => changeValue(e, 'subject')"
        >
          <a-select-option
            v-for="item in studentType"
            :key="item.id"
            :value="item.id"
          >
            {{ item.name }}
          </a-select-option>
        </a-select>
      </FormItem>
    </Form>
  </Model>
</template>

<script>
import Model from "components/common/model/Model";
import Form from "components/common/form/Form";
import FormItem from "components/common/form/formItem/FormItem";
import FormDoubleItem from "components/common/form/formDoubleItem/FormDoubleItem";
import { studentType } from "assets/data/other";
export default {
  components: {
    Model,
    Form,
    FormItem,
  },
  props: {
    row: {
      type: Object,
      default() {
        return {};
      },
    },
    show: {
      type: Boolean,
      defalut: false,
    },
  },
  data() {
    return { studentType };
  },
  methods: {
    changeValue(value, key) {
      this.row[key] = value;
    },

    confirm() {
      const row = this.row;
      this.$emit("confirm", {
        ...row,
      });
    },
    cancel() {
      this.$emit("cancel");
    },
  },
};
</script>

<style lang="less" scoped>
.t-form {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-items: center;
  padding-right: 30px;
  .ant-btn {
    width: 150px !important;
  }
}
</style>